<template>
  <i-form :model="checkboxForm"
          :rules="checkboxRules">
    <i-form-item prop="multiple"
                 label="请选择：">
      <i-checkbox-group v-model="checkboxForm.multiple"
                        @on-change="handleChange">
        <i-checkbox label='option1'>选项一</i-checkbox>
        <i-checkbox label='option2'>选项二</i-checkbox>
        <i-checkbox label='option3'>选项三</i-checkbox>
        <i-checkbox label='option4'>选项四</i-checkbox>
      </i-checkbox-group>
    </i-form-item>
  </i-form>
</template>
<script>
import { iForm, iFormItem, iCheckbox, iCheckboxGroup } from '../../components'
export default {
  components: {
    iForm, iFormItem, iCheckbox, iCheckboxGroup
  },
  data () {
    return {
      checkboxForm: {
        multiple: ['option1', 'option3']
      },
      checkboxRules: {
        multiple: [
          { type: 'array', required: true, message: '至少选择一个', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleChange (data) {
      // eslint-disable-next-line no-console
      console.log(data)
    }
  }
}
</script>